<template>
    <view>
        <view @click="gotoUnitTypeDetail(item)" v-for="(item,index) in houseTypeList" :key="index" class="unitContainer">
            <image :src="item.converImage" class="left" mode=""></image>
            <view class="right">
                <view class="title">
                    {{item.name}}
                </view>
                <view class="type">
                    {{item.roomNumber}}室{{item.hallNumber}}厅{{item.toiletNumber}}卫
                </view>
                <view class="size">
                    建筑面积{{item.constructionArea}}m²
                </view>
                <view class="introWrapper">
                    <view v-for="(tag,index1) in item.tags" :key="index1" class="item">
                        {{tag}}
                    </view>

                </view>
            </view>
            <view class="tag">
                {{item.totalPrice||''}}
            </view>
            
        </view>
        <view class="" style="height: 100rpx;">

        </view>
    </view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null


    export default {
        data() {
            return {
                houseTypeList: [],
            };
        },

        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },

        onLoad(options) {
            that = this;
            that.getHouseTypeList();
        },
        onShow() {

        },
        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
            ...mapActions(['loginWechat']),
            getHouseTypeList() {
                let that = this
                api.getHouseTypeList({
                    param: {}
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        for (var i = 0; i < res.data.length; i++) {
                            var list = res.data[i].tags.split(',')
                            res.data[i].tags = list;
                        }
                        that.houseTypeList = res.data
                    }
                })
            },
            gotoUnitTypeDetail(item){
                uni.navigateTo({
                    url:'/pages/shop/material/project/unitTypeDetail?id='+item.id,
                })
            }
        }
    }
</script>

<style lang="scss">
    page{
        background-color: #F3F3F3;
    }
    .unitContainer {
        width: 714rpx;
        // height: 280rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        padding: 32rpx 18rpx;
        display: flex;
        position: relative;
        margin-top: 32rpx;
        margin-left: 18rpx;

        .tag {
            position: absolute;
            right: 30rpx;
            top: 58rpx;
            font-weight: 600;
            color: #F6784C;
            font-size: 28rpx;
        }

        .left {
            width: 264rpx;
            height: 216rpx;
            border-radius: 10rpx;
            margin-right: 24rpx;
        }

        .right {
            .title {
                font-size: 32rpx;
                font-weight: 600;
                color: #1F1F1F;
                line-height: 45rpx;
                margin-top: 16rpx;
            }

            .type {
                font-size: 24rpx;
                color: #999999;
                line-height: 33rpx;
                margin-top: 15rpx;
            }

            .size {
                font-size: 24rpx;
                color: #999999;
                line-height: 33rpx;
                margin-top: 7rpx;
            }

            .introWrapper {
                display: flex;
                flex-wrap: wrap;
                margin-right: 6rpx;
                width: 350rpx;
                margin-top: 31rpx;

                .item {
                    padding: 0 10rpx;
                    height: 36rpx;
                    background: #F4F4F4;
                    border-radius: 8rpx;
                    font-size: 22rpx;
                    color: #999999;
                    line-height: 36rpx;
                    text-align: center;
                    margin-right: 6rpx;
					margin-top: 10rpx;
                }
            }

        }
    }
</style>
